// 每个组件必须加
import { Vue, Component, Prop } from 'vue-property-decorator'
import VmScrollbar from 'vue-multiple-scrollbar'
// 每个组件必须加
@Component({
  components: {
    VmScrollbar
  }
})
export default class DdScrollBar extends Vue {
  // 外层盒子的高度
  @Prop({
    type: Object,
    default() {
      return {
        height: '30vh',
        // bacground: "#fff",
        border: '1px solid #eee'
      }
    }
  })
  wrapStyle!: any

  // 滚动条的宽度
  @Prop({
    type: Number,
    default() {
      return 8
    }
  })
  barWidth!: number

  // 滚动条可以自定义样式
  @Prop({
    type: String
  })
  scrollBarClass!: string

  // 滚动条的背景颜色
  @Prop({
    type: String,
    default: 'rgba(151, 168, 190, 0.7)'
  })
  color!: string

  render(h) {
    const vm = this
    return h(
      'vm-scrollbar',
      {
        props: {
          wrapStyle: vm.wrapStyle,
          barWidth: vm.barWidth,
          barClass: vm.scrollBarClass
        }
      },
      // 插槽
      [this.$slots.default]
    )
  }
}
